<template>
	<view class="container">
        <view class="status_bar"> </view> 
		  <view class="top" >
		  			 <u-icon size="50rpx" name="arrow-left" @click="toBack"></u-icon>
		  			 <text style="text-align: center;font-weight: bold;padding-left: 250rpx;">发布活动</text>
		  			 <!-- <u-icon size="50rpx" style="float: right;" name="plus" @click="addEvent"></u-icon> -->
		  </view>      
		
		<input v-model="form.title" class="title-input" placeholder="标题" />
		<u-line ></u-line>
		<textarea placeholder="详细说说活动内容" :auto-height="true" maxlength="-1" v-model="form.content" class="content-display"></textarea>
		<u-line ></u-line>
		<!-- 上传图片 -->
		<block >
			<u-upload ref="uUpload" :size-type="['original', 'compressed']" name="files" :max-count="9"  upload-text="上传海报"
				:action="uploadImgUrl" @on-uploaded="submit" :auto-upload="false" height="300rpx" width="300rpx"></u-upload>

				
		</block> 

		<u-line></u-line>
		<view  class="choose-item" @click="chooseStartTime">
			<u-icon class="icon " name="clock-fill" color="#999" size="40"></u-icon>
			<text style="padding-left: 20rpx;">{{ form.startTime || '开始时间' }}</text>
			<view style="width: 400rpx;"></view>
			<u-icon  name="arrow-right" ></u-icon>
		</view>
		<view  class="choose-item" @click="chooseEndTime">
			<u-icon class="icon " name="clock-fill" color="#999" size="40"></u-icon>
			<text style="padding-left: 20rpx;">{{ form.endTime || '结束时间' }}</text>
			<view style="width: 400rpx;"></view>
			<u-icon  name="arrow-right" ></u-icon>
		</view>
		<uv-datetime-picker
			ref="datetimePicker1"
			v-model="value1"
			mode="datetime"
			@confirm="confirm"
			@cancel="cancel"
			@change="change"
			@close="close"
			round="20"
		></uv-datetime-picker>
		<uv-datetime-picker
			ref="datetimePicker2"
			v-model="value2"
			mode="datetime"
			@confirm="confirm1"
			@cancel="cancel"
			@change="change"
			@close="close"
			round="20"
		></uv-datetime-picker>
		<!-- 分类 -->
      
		<view class="choose-item" @click="chooseLocation">
			<u-icon class="icon" name="map-fill" color="#999" size="40"></u-icon>
			<text style="padding-left: 20rpx;">{{ form.address || "选择地点" }}</text>
			
			
			<view style="width: 400rpx;"></view>
			<u-icon  name="arrow-right" @click="chooseLocation"></u-icon>
		</view>
	<!-- 	<view @click="chooseClass" class="choose-item">
			<u-icon class="icon add-icon" name="man-add" color="#999" size="40"></u-icon>
			<text class="txt">{{ form.cateName || '活动规模' }}</text>
			<u-icon class="u-icon" name="arrow-right"></u-icon>
		</view> -->
		<view>
		    <uni-section title="活动规模" type="circle" style="background-color: #f2f2f2;">
		      <view class="uni-px-5 uni-pb-5">
		      	<uni-data-select v-model="form.value" :localdata="range" @change="change" placeholder="请选择人数"></uni-data-select>
		      </view>
		    </uni-section>
		  </view>
		  <u-line style="padding-top: 10rpx;"></u-line>
		  <view>
		      <uni-section v-if="userInfo.roleId==0" title="活动类型" type="circle" style="background-color: #f2f2f2;">
		        <view  class="uni-px-5 uni-pb-5">
		        	<uni-data-select v-model="form.type" :localdata="type0" @change="change" placeholder="请选择类型"></uni-data-select>
		        </view>
		      </uni-section>
			  <uni-section v-if="userInfo.roleId==1" title="活动类型" type="circle" style="background-color: #f2f2f2;">
			    <view class="uni-px-5 uni-pb-5">
			    	<uni-data-select v-model="form.type" :localdata="type1" @change="change" placeholder="请选择类型"></uni-data-select>
			    </view>
			  </uni-section>
			  <uni-section v-if="userInfo.roleId==2" title="活动类型" type="circle" style="background-color: #f2f2f2;">
			    <view class="uni-px-5 uni-pb-5">
			    	<uni-data-select v-model="form.type" :localdata="type2" @change="change" placeholder="请选择类型"></uni-data-select>
			    </view>
			  </uni-section>
		    </view>
		    <u-line style="padding-top: 10rpx;"></u-line>
		  <view style="margin-top: 10rpx;background-color:#fee2cc;margin-left: -30rpx;margin-right: 300rpx;height: 60rpx;">
			  <text style="padding-left: 50rpx;padding-top: 15rpx;position: absolute;">活动负责人信息</text>
			  </view>
		  <view> 
			  <u-form >
		  			<!-- <u-form-item label="真实姓名" label-width="140rpx" style="width: 88%;margin: 0 auto;" prop="name"  >
		  				<u-input v-model="form.sname" shape="circle" />
		  			</u-form-item>
		  			<u-form-item label="身份证号" label-width="140rpx" style="width: 88%;margin: 0 auto;" prop="intro">
		  				<u-input v-model="form.sidentyNumber" shape="circle"/>
		  			</u-form-item> -->
					<u-form-item label="联系方式" label-width="140rpx" style="width: 88%;margin: 0 auto;" prop="intro">
						<u-input v-model="form.sphone" shape="circle" />
					</u-form-item>
			 </u-form>
		  		
		</view>
		 
		<view class="comprise">
			<checkbox-group @change="checkboxChange">
			<label>
			<checkbox :checked="state"  color="#000000" style="transform:scale(0.7)" />
			</label>
			</checkbox-group>
			<!-- <image :src="right" style="height: 30rpx; margin-left: 20rpx;margin-right: 20rpx;" mode="heightFix" @click="fillRight"> </image> -->
			<text style="margin-left: 10rpx;color:#ff9d66;" @click="readSafety">安全承诺书 </text>
		</view>
		<view class="button-style" >
			<u-button  :custom-style="btnStyle" @click="uploadImg" shape="circle">发布活动</u-button>
		</view>
		<u-popup :show="show" mode="center" :closeable='true' round="20rpx" customStyle="width: 500rpx;height: 800rpx;" close-icon-size="30rpx" :closeOnClickOverlay='true' @close="closefloat">
			<!-- <view style="padding-top:60rpx;font-size: 40rpx;font-weight: bold;text-align: center;padding-left: 40rpx;padding-right: 40rpx;">你想了解我的寻搭需求吗！</view>
			<view style="padding-top: 20rpx;padding-left: 40rpx;padding-right: 40rpx;">
			<u-button   color="#ffdf80" style="font-size: 40rpx;color: black;" @click="requestChat">请求聊天</u-button>
			
			</view> -->
			<scroll-view scroll-y="true" style="height: 600rpx;width: 400rpx;margin: auto;">
				<text style="font-size: 50rpx;font-weight: bold;white-space: pre-wrap;text-align: justify;">一拍即合搭子活动<br/></text>
				<view>
				<text style="font-size: 50rpx;font-weight: bold;white-space: pre-wrap;padding-left: 60rpx;">安全承诺书<br/></text>
				</view>
				<text >我自愿参加本次搭子活动，并保证我的身体和心理状况适合参加本次搭子活动，对本次搭子活动的目的、性质、地点的情况以及可能的风险全部清楚了解。在我进行搭子活动期间，保证将自觉遵守国家法律法规。如出现下列情况，依据本承诺书和有关规定处理：
				1. 我的财物的遗失、被盗、毁坏等经济损失由本人承担；
				2. 由于我和搭子的过错、不可抗力、意外事件等导致的人身伤害，依据《中华人民共和国民典法》处理；
				3. 我实施的违法行为或违反活动地点各项规定以及民族习惯等行为所造成的损失和引起的法律责任由本人承担；
				4. 由于我的过错造成的第三方的人身伤害或经济损失由本人承担；
				
		        </text>
			</scroll-view>
			<view style="padding-left: 20rpx;display: flex;padding-right: 20rpx;padding-bottom: 20rpx;">
				<checkbox-group style="padding-top: 20rpx;" @change="checkboxChange">
				<label>
				<checkbox :checked="state" borderColor="#ff9d66" color="#000000" />
				</label>
				</checkbox-group>
				<!-- <image :src="right" style="height: 30rpx; margin-left: 20rpx;margin-right: 20rpx;" mode="heightFix" @click="fillRight"> </image> -->
				<text style="margin-left: 10rpx;color:#ff9d66;font-size: 25rpx;font-weight: 400;margin-top: 10rpx;">我已经详细阅读并认可本承诺书，对整体内容和各项规定均无异议 </text>
			</view>
			
		</u-popup>
	</view>
</template>

<script>
	import {  timeFormat} from '@/uni_modules/uv-ui-tools/libs/function/index.js'
	export default {
		onLoad(options) {
			if (!uni.getStorageSync("hasLogin")) {
				this.$u.toast('请先登录哦');
			}
			this.userInfo = uni.getStorageSync("userInfo")
			// console.log(this.userInfo)
			// console.log("123")
			
		},
		data() {
			return {
				btnStyle: {
					color: "#fff",
					backgroundColor: '#ff9d66'
				},
				
				range: [
				        { value: 0, text: "5-10" },
				        { value: 1, text: "10-20" },
				        { value: 2, text: "20-50" },
						{ value: 3, text: "50-100" },
						{ value: 4, text: "不限" },
				      ],
			   type0: [
			           { value: 0, text: "官方活动" },
			           
			   		
			         ],
				type1: [
				        
				        { value: 1, text: "校园活动" },
				        
						
				      ],
				type2: [
				        
				        { value: 2, text: "个人活动" },
						
				      ],
				
				value1: Number(new Date()),
				value2: Number(new Date()),
				state: false,
				timestamp1: '',
				timestamp2: '',
				// 后端上传图片路径
				uploadImgUrl: this.$c.domain + 'oss/upmutiload',
				form: {
					title: '',
					
					topicId: 2,
					
					content: '',
					media: [],
					
					address: '',
					
					
					
					startTime: '',
					endTime: '',
					value: 3,
					sname: '',
					sidentyNumber: '',
					sphone: '',
					type: 2,
					
				},
			show:false,
			userInfo:{}
				
			
				
				
			};
		},
	
		methods: {
			// switch1Change(){
			// 	if(this.form.address!=='不显示位置') 
			// 	{this.form.address ="不显示位置"}
			// 	else{
			// 		this.form.address='显示位置'
			// 	}
			// },
			chooseLocation(){
				uni.chooseLocation({
				  success: res => {
				     this.form.address = res.name;
				    uni.setStorageSync("position", res.name)
				    console.log(res)
				  }
				})
			},
			readSafety(){
			    this.show=true	
			},
			
			closefloat(){
				this.show=false
			},
			toBack(){
				uni.navigateBack()
			},
			checkboxChange(){
				this.state = !this.state;
				this.show=false
			},
		
			chooseEndTime(){
				this.$refs[`datetimePicker2`].open();
			},
			chooseStartTime(){
				this.$refs[`datetimePicker1`].open();
			},
			confirm(e) {
				
				this.form.startTime=timeFormat(e.value,'yyyy-mm-dd hh:MM')
				
				// this.form.startTime=e.value
				this.timestamp1=e.value
				
			},
			confirm1(e) {
				
				
				this.timestamp2=e.value
				if(this.timestamp2<this.timestamp1){
					this.$u.toast("结束时间不能小于开始时间")
				}
				else{
					this.form.endTime=timeFormat(e.value,'yyyy-mm-dd hh:MM')
					
					// this.form.endTime=e.value
					}
				
			},
			close() {
				console.log('close');
			},
			cancel() {
				console.log('cancel');
			},
     
			uploadImg() {
              const regPsidno = /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[X])$)$/
              var reg=/^[1][3,4,5,6,7,8,9][0-9]{9}$/;
				if (!this.form.content) {
					this.$u.toast('内容不能为空');
					return;
				}
				if (!this.form.title) {
					this.$u.toast('标题不能为空');
					return;
				}
				if(!this.state){
					this.$u.toast('安全承诺书未同意');
					return;
				}
				if(!this.form.startTime){
					this.$u.toast('请选择活动开始时间');
					return;
				}
                if(!this.form.endTime){
					this.$u.toast('请选择活动结束时间');
					return;
				}
			
			// 	if(!this.form.sname){
			// 		this.$u.toast('请填写负责人姓名');
			// 		return;
			// 	}
			// 	if(!this.form.sidentyNumber){
			// 		this.$u.toast('请填写负责人身份证号');
					 
			
			// 		return;
			// 	}
			// 	if(!regPsidno.test(this.form.sidentyNumber)){
			// 		this.$u.toast('负责人身份证号格式错误');
					 	
			// 		return;
			// 	}
				if(!this.form.sphone){
					this.$u.toast('请填写负责人联系方式');
					
					return;
				}
				if(!reg.test(this.form.sphone)){
					this.$u.toast('请检查电话号码格式');
					
					return;
				}
				
				uni.showLoading({
					mask: true,
					title: '发布中'
				});
				this.$refs.uUpload.upload();
			},

			submit(e) {
				uni.showLoading({
					mask: true,
					title: '发布中'
				});
                
				let mediaList = [];
				
				e.forEach(function(item, index) {
					
					mediaList.push(String(item.response.url));
					
				});

				this.form.media = mediaList;
				if(this.form.media==" "||this.form.media.length==0){
					this.$u.toast('请选择活动海报');
					return;
				}
               // 传递帖子表单到后端的接口
				this.$H.post('activities/add', this.form).then(res => {
					
					if(res.code == 200){
					uni.showToast({
						icon: "none",
						title: '发布成功',
						
					})
					
					setTimeout(function () {
					                        uni.reLaunch({
					                        	url:'/pages/tribe/index'
					                        })
					                    }, 2000);
					
					}else{
					uni.showToast({
						icon: "none",
						title: '发布失败'
					})
					}
					// if (res.code == 0) {
					// 	uni.redirectTo({
					// 		url: '/pages/post/post?id=' + res.result
					// 	});
					// }
				
					
				});
				uni.hideLoading();
				// setTimeout(uni.switchTab({
				// 	url: '/pages/partner/index'
				// }), 1500);
			},
			
		}
	};
</script>

<style lang="scss" >
	.status_bar {
	        height: var(--status-bar-height);
	        width: 100%;
	    }
	.top{
		display: flex;
		width: 100%;
		box-sizing: border-box;
		// justify-content: space-between;
		
	    align-items: center;
		height: 100rpx;
		padding: 0 0rpx;
		background-color: white;
		
	}
	.container{
		padding: 30rpx;
		background-color: white;
	}
	.title-input {
		
		margin: 20rpx 0;
		padding: 20rpx 0;
	}
	.uni-px-5 {
		padding-left: 10px;
		padding-right: 10px;
	}
	.slot-btn {
			width: 341rpx;
			height: 140rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background: rgb(244, 245, 246);
			border-radius: 10rpx;
		}
	.comprise {
		display: flex;
		margin-top: 20rpx;
	}
	.slot-btn__hover {
			background-color: rgb(235, 236, 238);
		}

	.content-display {
		width: 100%;
		padding: 20rpx 0;
		min-height: 300rpx;
	}

	.choose-item {
		display: flex;
		
		// justify-content: space-between;
		// align-items: center;
		padding: 20rpx;
		border-bottom: 1px solid #F5F5F5;
        // width: 750rpx;/*  */
		// &:last-child {
		// 	border: 0;
		// }

		// .txt {
		// 	margin-left: 20rpx;
		// }




		// .add-icon {
		// 	margin-left: 0;
		// }
	}

	.button-style {
		margin-top: 50rpx;
		color: #ff9d66;
	}
</style>
